<template>
  <div id="navbar">
    <ul :style="{
            flexDirection: dir,
            position: fixed,
            bottom:b,
            left:l,
            width: w,
            height:h,
        }">
      <li v-for="(item,index) in tabs" :key="index" @click="pageChange(item.url)">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    tabs: {
      type: Array,
      default: () => {
        return []
      },
    },
    dir: {
      type: String,
      default: 'row'
    },
    b: {
      type: String
    },
    l: {
      type: String
    },
    w: {
      type: String,
      default: '100%'
    },
    h: {
      type: String,
    },
    fixed: {
      type: String,
      default: 'fixed'
    }
  },
  data() {
    return {};
  },
  // 子组件转换
  components: {},
  // 数据引入
  mounted() {
  },
  created() {
  },
  //点击函数事件
  methods: {
    pageChange(url) {
      this.$router.push(url)
    }
  },
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
#navbar {

  ul {
    display: flex;
    //flex-direction: column;
    justify-content: space-around;
    font-size: .28rem;
    align-items: center;

    li {
      height: 1rem;
      line-height: 1rem;
      text-align: center;

      &:hover {
        color: red;
      }
    }
  }
}
</style>